<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import { getMemberDetail,getPrincipalInfo, queryMemberSurveyLabel  } from '@/api/Member/index.js'
import TopBar from '@/components/Topbar/index.vue';
import ReturnVisitRecords from './Components/ReturnVisitRecords.vue';
import HealthRecords from './Components/HealthRecords.vue';
import RehabilitationLog from './Components/RehabilitationLog.vue';
import AppointmentRecord from './Components/AppointmentRecord.vue';
import TreatmentRecord from './Components/TreatmentRecord.vue';
import IntegralFlow from './Components/IntegralFlow.vue';
import CouponFlow from './Components/CouponFlow.vue';
import ProjectRecord from './Components/ProjectRecord.vue';
import WriteOffRecords from './Components/WriteOffRecords.vue';
import ConsumptionRecord from './Components/ConsumptionRecord.vue';
const route = useRoute();
const router = useRouter();
const backValue = ref('memberChildManagementIndex');
const tabName = ref("会员详情");
const moduleType = ref("基础信息");
const myform = ref(null);


const form = ref({
    
})
const pageLoading = ref(false);
const uuid = ref(route.query.id || "");
const _getMemberDetail = async ()=>{
    pageLoading.value = true;
    try{

        let result = await getMemberDetail({memberId:uuid.value});
        form.value = {...result};
        await _getPrincipalInfo();
    }catch(e){
        console.log(e);
    }finally{
        pageLoading.value = false;
    }
}
_getMemberDetail();
const principalList = ref([]);
const _getPrincipalInfo = async ()=>{
    try{
        let result = await getPrincipalInfo({userId:uuid.value});
        principalList.value = result;

    }catch(e){
        console.log(e);
    }
}
// 获取会员注册问题
const memberSurveyLabel = ref([])
const _queryMemberSurveyLabel = async ()=>{
    try{
        memberSurveyLabel.value = await queryMemberSurveyLabel({
            memberId:uuid.value
        });
    }catch(e){
        console.log(e);
    }
}
_queryMemberSurveyLabel()
onActivated(()=>{
    if(uuid.value !== route.query.id){

        uuid.value = route.query.id;
        _getMemberDetail();
    }

})
const changeModuleType = ()=>{
    if(moduleType.value == "基础信息"){
        _getMemberDetail(); 
    }
}
</script>
<template>
    <div class="page-contain">
        <TopBar :backValue="backValue" :tabName="tabName"></TopBar>
        <div class="info">
            <div class="opearate-btn">
                <el-radio-group v-model="moduleType" @change="changeModuleType">
                    <el-radio-button label="基础信息" />
                    <el-radio-button label="疗程记录" />
                    <el-radio-button label="项目记录" />
                    <el-radio-button label="核销记录" />
                    <el-radio-button label="消费记录" />
                    <el-radio-button label="预约记录" />
                    <el-radio-button label="回访记录" />
                    <el-radio-button label="健康档案" />
                    <el-radio-button label="康复记录" />
                    <el-radio-button label="积分流水" />
                    <el-radio-button label="优惠券流水" />
                </el-radio-group>
            </div>
            <div class="module-page" v-if="moduleType == '基础信息'" v-loading="pageLoading">
                <div class="block-lis">
                    <div class="lis-head">
                        <div class="icon-view">
                            <div class="icon-view-on"></div>
                        </div>
                        <span class="label-name">基本信息</span>
                        <!-- <img src="@/assets/icon/pen-edit.png" alt=""> -->
                    </div>
                    <el-form :model="form" label-width="100px" ref="myform">
                        <div class="lis-form">
                            <div class="lis-item">
                                <el-form-item label="姓名：" >
                                    <span>{{ form.userName || '-'}}</span>
                                </el-form-item>
                            </div>
                            <div class="lis-item">
                                <el-form-item label="性别：" >
                                    <span v-if="form.sex == 1">男</span>
                                    <span v-else-if="form.sex == 0">女</span>
                                    <span v-else>-</span>
                                </el-form-item>
                            </div>
                            <div class="lis-item">
                                <el-form-item label="来源渠道：" >
                                    <span>{{ form.sourceChannel || '-'}}</span>
                                </el-form-item>
                            </div>
                            <div class="lis-item">
                                <el-form-item label="手机号：" >
                                    <span>{{ form.phone || '-'}}</span>
                                </el-form-item>
                            </div>
                            <div class="lis-item">
                                <el-form-item label="生日：" >
                                    <span>{{ form.birthday || '-'}}</span>
                                </el-form-item>
                            </div>
                            <div class="lis-item">
                                <el-form-item label="注册日期：" >
                                    <span>{{ form.registerTime || '-'}}</span>
                                </el-form-item>
                            </div>
                            <div class="lis-item">
                                <el-form-item label="办理人：" >
                                    <span>{{ form.transactor || '-'}}</span>
                                </el-form-item>
                            </div>
                            <div class="lis-item">
                                <el-form-item label="注册门店：" >
                                    <span>{{ form.storeName || '-'}}</span>
                                </el-form-item>
                            </div>
                            <div class="lis-item">
                                <el-form-item label="职业：" >
                                    <span>{{ form.job || '-'}}</span>
                                </el-form-item>
                            </div>
                            <div class="lis-item">
                                <el-form-item label="住址：" >
                                    <span>{{ form.address || '-'}}</span>
                                </el-form-item>
                            </div>

                        </div>
                    </el-form>
                </div>
                <div class="block-lis">
                    <div class="lis-head">
                        <div class="icon-view">
                            <div class="icon-view-on"></div>
                        </div>
                        <span class="label-name">会员信息</span>
           
                    </div>
                    <el-form :model="form" label-width="100px" ref="myform">
                        <div class="lis-form">
                            <div class="lis-item">
                                <el-form-item label="可用积分：" >
                                    <span class="a-link" @click="moduleType = '积分流水'">{{ form.integral || 0 }}</span>
                                </el-form-item>
                            </div>
                            <div class="lis-item">
                                <el-form-item label="会员分层：" >
                                    <span>{{ form.layer || '-' }}</span>
                                </el-form-item>
                            </div>
                            <div class="lis-item">
                                <el-form-item label="会员等级：" >
                                    <span>{{ form.memberLevel || '-' }}</span>
                                </el-form-item>
                            </div>
                            <div class="lis-item">
                                <el-form-item label="优惠券：" >
                                    <span class="a-link" @click="moduleType = '优惠券流水'">{{ form.coupon || 0 }}</span>
                                </el-form-item>
                            </div>
                            <div class="lis-item">
                                <el-form-item label="最近一次到店：" >
                                    <span>{{ form.lastTimeInStore || '-' }}</span>
                                </el-form-item>
                            </div>
                            <div class="lis-item">
                                <el-form-item label="会员标签：" >
                                    <span v-if="form.tags && form.tags.length>0">{{ form.tags.join(',') }}</span>
                                    <span v-else>-</span>
                                </el-form-item>
                            </div>

                        </div>
                    </el-form>
                </div>
                <div class="block-lis">
                    <div class="lis-head">
                        <div class="icon-view">
                            <div class="icon-view-on"></div>
                        </div>
                        <span class="label-name">负责人信息</span>
           
                    </div>  
                    <div class="person-list" style="margin-top:6px" v-if="principalList && principalList.length>0">
                        
                        <div class="lis-info" v-for="(item,index) in principalList" :key="index">
                            {{ item.storeName || '未知' }} -  {{ item.principalName || '未知' }} - {{ item.principalPhone || '未知' }}
                        </div>
                    </div>
                    <div class="person-list" v-else>
                        <div style="font-weight:400;font-size: 14px;color:#000000;margin-top:10px;margin-bottom:16px">暂无负责人信息</div>
                    </div>
                </div>
                <div class="block-lis">
                    <div class="lis-head">
                        <div class="icon-view">
                            <div class="icon-view-on"></div>
                        </div>
                        <span class="label-name">注册问卷</span>
                        <!-- <img src="@/assets/icon/pen-edit.png" alt=""> -->
                    </div>
                    <div v-if="memberSurveyLabel.length" style="margin-top:6px" >
                        <div class="questionnaireItem" v-for="(item,index) in memberSurveyLabel" :key="item.issueName">
                            <div class="questionnaireItem-question">
                                <div class="questionnaireItem-question-icon">问</div>
                                <span class="questionnaireItem-question-text">{{ `${index+1}、${item.issueName}` }}</span>
                            </div>
                            <div class="questionnaireItem-answer">
                                {{ item.labelName }}
                            </div>
                        </div>
                        
                    </div>
                    <div class="person-list" v-else>
                        <div style="font-weight:400;font-size: 14px;color:#000000;margin-top:10px;margin-bottom:16px">暂无注册问卷信息</div>
                    </div>
                </div>
            </div>
            <div class="module-page" v-if="moduleType == '疗程记录'">
                <TreatmentRecord :uuid="uuid"></TreatmentRecord>
            </div>
            <div class="module-page" v-if="moduleType == '项目记录'">
                <ProjectRecord :uuid="uuid"></ProjectRecord>
            </div>
            <div class="module-page" v-if="moduleType == '核销记录'">
                <WriteOffRecords :uuid="uuid" />
            </div>
            <div class="module-page" v-if="moduleType == '消费记录'">
                <ConsumptionRecord :uuid="uuid" />
            </div>
            <div class="module-page" v-if="moduleType == '预约记录'">
                <AppointmentRecord :uuid="uuid"/>
            </div>
            <div class="module-page" v-if="moduleType == '回访记录'">
                <ReturnVisitRecords :uuid="uuid"/>
            </div>
            <div class="module-page" v-if="moduleType == '健康档案'"> 
                <HealthRecords :uuid="uuid"/>
            </div>
            <div class="module-page" v-if="moduleType == '康复记录'">
                <RehabilitationLog :uuid="uuid"/>
            </div>
            <div class="module-page" v-if="moduleType == '积分流水'">
                <IntegralFlow :uuid="uuid" />
            </div>
            <div class="module-page" v-if="moduleType == '优惠券流水'">
                <CouponFlow :uuid="uuid"/>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
.state-show{
    display: flex;
    align-items: center;
    img{
        width: 14px;
        height: 14px;
        cursor: pointer;
        margin-left:4px;
    }
}
.empty-data{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .empty-img{
        width: 300px;
        height: 200px;
        background: url('@/assets/images/empty-table.png');
        background-size: 100% 100%;
        position: relative;
        .text{
            position: absolute;
            bottom:0;
            width: 100%;
            text-align: center;
            color: #666666;
            line-height: 14px;
            font-size: 14px;

        }
    }
}
.page-contain{
    width: 100%;
    height: 100%;
    :deep(.el-radio-button:first-child .el-radio-button__inner){
        border-left:1px solid #3480FF;
    }
    .info{
        width: 100%;
        height: calc(100% - 48px);
        box-sizing: border-box;
        padding:16px;
        .opearate-btn{
            width: 100%;
            padding-bottom:16px;
            height: 48px;
            box-sizing: border-box;
        }
        .module-page{
            width: 100%;
            height: calc(100% - 48px);
            overflow: auto;
            .record-area{
                width: 100%;
                .record-lis{
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    margin-bottom:36px;
                    .person{
                        display: flex;
                        justify-content: flex;
                        border-radius: 4px;
                        background: rgba(52, 128, 255, 0.1);
                        padding: 7px 8px;
                        color: #3480ff;
                        font-size: 14px;
                        line-height: 14px;
                        .img2{
                            width: 14px;
                            height: 14px;
                            margin-right: 4px;
                        }
                    }
                    .person2{
                        display: flex;
                        justify-content: flex;
                        border-radius: 4px;
                        background: rgba(232, 249, 239, 1);
                        padding: 7px 8px;
                        color: #18BF5B;
                        font-size: 14px;
                        line-height: 14px;
                        .img2{
                            width: 14px;
                            height: 14px;
                            margin-right: 4px;
                        }
                    }
                    .date{
                        width: 90px;
                        box-sizing: border-box;
                        padding:12px;
                        padding-right: 0px;
                        .p1{
                            color: #000000;
                            width:100%;
                            font-size: 24px;
                            font-weight: bold;
                            line-height: 24px;
                        }
                        .p2{
                            color: #000000;
                            width:100%;
                            font-size: 16px;
                            font-weight: bold;
                            line-height: 16px;
                            margin-top:8px;
                        }
                    }
                    .img-show{
                        box-sizing:border-box;
                        padding:16px;
                        padding-top:0px;
                        .person-lis{
                            width: 100%;
                            margin-bottom:8px;
                            display: flex;
                            justify-content: flex-start;

                        }
                        .img-b{
                            position: relative;
                            width: 140px;
                            height: 140px;
                            .img1{
                                width: 100%;
                                height: 100%;
                                border-radius: 4px;
                                position: absolute;
                                top:0;
                                left:0;
                                z-index: 1;
                            }
                            .mask{
                                width: 100%;
                                height: 100%;
                                border-radius: 4px;
                                background: rgba(0, 0, 0, 0.4);   
                                top:0;
                                left:0;
                                position: absolute;
                                z-index: 2;
                            }
                            .img2{
                                width: 100%;
                                height: 100%;
                                border-radius: 4px;
                                top:10px;
                                left:10px;
                                position: absolute;
                                z-index: 3;
                            }
                        }
                    }
                    .chat-info{
                        padding:0 16px;
                        box-sizing: border-box;
                        border-left:1px solid #DDDDDD;
                        border-right:1px solid #DDDDDD;
                        .store-info{
                            width: 100%;
                            display: flex;
                            justify-content: flex-start;
                            padding-top:5px;
                            padding-bottom:8px;
                            align-items:center;
                            .img1{
                                width: 18px;
                                height: 18px;
                            }
                            .name-info{
                                margin-left:4px;
                                margin-right:16px;
                                color:#000;
                                font-weight:bold;
                                line-height: 18px;
                                font-size: 18px;
                            }
                            .name-info2{
                                color:#222222;
                                font-size: 14px;
                                line-height: 14px;
                            }
                            .s-line{
                                width: 1px;
                                height: 48px;
                                background:#DDDDDD;
                                margin-right: 16px;
                            }
  
                        }
                        .icon-info{
                            width: 100%;
                            display: flex;
                            justify-content: flex-start;
                            flex-wrap: wrap;

                            .icon-lis{
                                margin-bottom:16px;
                                width: 50%;
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                .icon-1{
                                    width: 14px;
                                    height: 14px;
                                }
                                .l-name{
                                    color: #222222;
                                    font-size: 14px;
                                    margin-left:4px;
                                    margin-right: 16px;

                                }
                                .r-name{
                                    color: #FF6B00;
                                    font-size: 14px;
                                    margin-left:4px;
                                    margin-right: 16px;
                                }
                            }
                        }
                        .speak-block{
                            width: 600px;
                            padding: 12px;
                            box-sizing: border-box;
                            background: #F6F6F6;
                            border-radius: 4px;
                            .lis-speak{
                                width: 100%;
                                display: flex;
                                justify-content: flex-start;
                                margin-bottom:16px;
                                &:last-child{
                                    margin-bottom: 0;
                                }
                                .speak-p{
                                    width: 70px;
                                    color: #000000;
                                    font-size: 14px;
                                    font-weight: bold;
                                    line-height: 14px;
                                }
                                .speak-i{
                                    width: calc(100% - 70px);
                                    color: #222222;
                                    font-size: 14px;
                                    line-height: 14px;
                                    word-break: break-all;
                                    word-wrap: break-word;
                                }
                            }
                        }
                    }
                }
            }
            :deep(.el-form-item){
                margin-bottom:0px;
                
            }
            :deep(.el-form-item__label){
                padding:0;

            }
            .block-lis{
                width: 100%;
                padding:16px;

                background: #F5F9FF;
                box-sizing: border-box;
                margin-bottom:16px;
                .person-list{
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    .lis-info{
                        background: #D6E6FF;
                        height: 30px;
                        box-sizing: border-box;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding:0 12px;
                        margin-right: 16px;
                        margin-bottom:16px;
                        color:#000000;
                        font-size: 14px;
                        font-weight: 400;

                    }
                }
                .lis-form{
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                
                    .lis-item{
                        width: calc(100% / 3);
                        .a-link{
                            cursor: pointer;
                            color:#3480FF;
                        }
                    }
                }
                .lis-head{
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding-bottom: 6px;
                    .icon-view{
                        margin-right: 8px;
                        position: relative;
                        width: 14px;
                        height: 14px;

                        &::before {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 10px;
                            height: 10px;
                            border-radius: 2px;
                            background-color: #10E7F9; 
                        }
                        .icon-view-on{
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: 10px;
                            height: 10px;
                            border-radius: 2px;
                            background-color: #3480FF; /* 背景色 */
                        }
                    }
                    .label-name{
                        color: #000000;
                        font-weight: bold;
                        font-size: 14px;
                        margin-right: 8px;
                    }
                    img{
                        width: 14px;
                        height: 14px;

                    }
                }
            }
        }
    }
}
.questionnaireItem:last-child{
    margin-bottom: 0;
}
.questionnaireItem{
    margin-bottom: 16px;
    .questionnaireItem-question{
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap:8px;
        .questionnaireItem-question-icon{
            font-size: 12px;
            color: #fff;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-radius: 50% 50% 0 50%;
            background-color: #18BF5B;
        }
        .questionnaireItem-question-text{
            color: #000000;
            font-family: "PingFang SC";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 14px;
        }
    }
    .questionnaireItem-answer{
        color: #222222;
        font-family: "PingFang SC";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
    }
}
</style>